<template>
  <div>
    <div></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          content: "食品",
          name: "薯片",
        },
        {
          id: 2,
          content: "食品",
          name: "方便面",
        },
        {
          id: 3,
          content: "汽车",
          name: "奔驰",
        },
        {
          id: 4,
          content: "汽车",
          name: "宝马",
        },
        {
          id: 5,
          content: "汽车",
          name: "奥迪",
        },
        {
          id: 6,
          content: "商超",
          name: "永辉超市",
        },
        {
          id: 7,
          content: "商超",
          name: "riteaid超市",
        },
        {
          id: 8,
          content: "汽车",
          name: "别克",
        },
      ],
      tableTreeData: [],
    };
  },
  mounted() {
    this.tableTreeData = [
      {
        id: 0,
        content: this.tableData[0].content,
        children: [this.tableData[0]],
      },
    ];
    this.tableData.map((data) => {
      let index = null;
      for (let i = 0; i < this.tableTreeData.length; i++) {
        if (data.content === this.tableTreeData[i].content) {
          index = i;
        } else {
          index = false;
        }
        if(index) {
            break
        }
      }
      if (index) {
        this.tableTreeData[index].children.push(data);
      } else {
        console.log(index);
        this.tableTreeData.push({
          id: this.tableTreeData.length,
          content: data.content,
          children: [data],
        });
      }
    });
    this.tableTreeData.shift();
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
</style>